<script setup lang='ts'>

import NavBar from '../../components/NavBar.vue'
import { goTo } from '../../../hooks/useNavigator'
</script>

<template>
  <NavBar :transparent="true" class="nav">
    <template v-slot:body>
      <view class="search">
        <view class="input" style="width: 436rpx;">
          <image mode="widthFix" class="icon" src="/static/image/navbar/search.png"/>
          <input placeholder="请输入场地名称/设备号/会员ID" />
        </view>
      </view>
    </template>
  </NavBar>
    <image mode="widthFix" class="bg" src="/static/image/home/mj_bg.png"/>
  <view class="outer nav-padding">
      <view class="list">
        <view class="card">
          <view class="header">
            <view class="name">618年中促销活动(满186减30)</view>
          </view>
          <view class="body">
            <p class="code">活动状态：进行中</p>
            <p>开始时间：2024-06-21 15:56</p>
            <p>结束时间：2024-06-21 15:56</p>
          </view>
          <view class="footer">
            <button class="btn">查看</button>
            <button class="btn primary">删除</button>
          </view>
        </view>
        <view class="card">
          <view class="header">
            <view class="name">618年中促销活动(满186减30)</view>
          </view>
          <view class="body">
            <p class="code">活动状态：进行中</p>
            <p>开始时间：2024-06-21 15:56</p>
            <p>结束时间：2024-06-21 15:56</p>
          </view>
          <view class="footer">
            <button class="btn">查看</button>
            <button class="btn primary">删除</button>
          </view>
        </view>
        <view class="card">
          <view class="header">
            <view class="name">618年中促销活动(满186减30)</view>
          </view>
          <view class="body">
            <p class="code">活动状态：进行中</p>
            <p>开始时间：2024-06-21 15:56</p>
            <p>结束时间：2024-06-21 15:56</p>
          </view>
          <view class="footer">
            <button class="btn">查看</button>
            <button class="btn primary">删除</button>
          </view>
        </view>
        <view class="card">
          <view class="header">
            <view class="name">618年中促销活动(满186减30)</view>
          </view>
          <view class="body">
            <p class="code">活动状态：进行中</p>
            <p>开始时间：2024-06-21 15:56</p>
            <p>结束时间：2024-06-21 15:56</p>
          </view>
          <view class="footer">
            <button class="btn">查看</button>
            <button class="btn primary">删除</button>
          </view>
        </view>
      </view>
    </view>
  <view class="action">
    <button class="btn large" @click="goTo('/pages/index/ProductManager/Add')">新增活动</button>
  </view>
</template>

<style scoped lang='scss'>
.bg {
  position: fixed;
  width: 100%;
}

.outer {
  z-index: 5;
  position: relative;
}
.list {
  margin-top: 220rpx;
}
.card {
  background: #FFFFFF;
  box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EBEEF1;
  border-radius: 8rpx 8rpx 0 0;
  margin: 24rpx 30rpx;
  box-sizing: border-box;
  .header {
    box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EBEEF1;
    padding: 22rpx 0;
    display: flex;
    justify-content: space-between;
    .name {
      font-size: 28rpx;
      font-weight: bold;
      position: relative;
      margin-left: 26rpx;
      &:before {
        content: '';
        width: 6rpx;
        height: 40rpx;
        position: absolute;
        left: -26rpx;
        background: #FF4638;
        border-radius: 3rpx 3rpx 3rpx 3rpx;
      }
    }

    .view {
      font-size: 28rpx;
      color: #FF4638;
      font-weight: lighter;
      margin-right: 20rpx;
    }
  }
  .body {
    padding: 32rpx 34rpx;
    font-size: 24rpx;
    color: #303030;
    box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EBEEF1;
    .code {
      color: #FF9832;
    }
    p {
      display: flex;
      line-height: 24rpx;
      margin-bottom: 20rpx;
      font-weight: bold;
      align-items: center;
      justify-content: space-between;
    }
    .btn {
      border: 2rpx solid #FF9832;
      color: #FF9832;
      height: 48rpx;
      padding: 6rpx 18rpx;
    }
  }
  .footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 28rpx 0;
    column-gap: 110rpx;
  }
}
.action {
  background: #fff;
  padding: 10rpx 32rpx;
  position: fixed;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 99;
  .btn {
    &:after {
      border: none;
    }
    width: 100%;
    border: none;
    background: #ffeceb;
  }
}
</style>